<template>
  <search-table :data="affairs" :columns="columnsOptions" :searchKeys="searchKeys">
    <el-dialog :close-on-click-modal="false" width="500px" :visible.sync="visible" title="请假单">
      <el-form ref="form" :model="processDetial">
        <el-col :span="22">
          <el-form-item :rules="{
              required: true,
              message: '姓名',
              trigger: 'blur'
            }" label="姓名" label-width="100px" prop="name">
            <el-input v-model="processDetial.name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item :rules="{
              required: true,
              message: '类型',
              trigger: 'change'
            }" label="类型" label-width="100px" prop="type">
            <el-select v-model="processDetial.type" placeholder="请选择类型" style="width: 100%;">
              <el-option label="事假" value="1"></el-option>
              <el-option label="年假" value="2"></el-option>
              <el-option label="婚假" value="3"></el-option>
              <el-option label="产假" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="天数" label-width="100px" prop="num" :rules="[
              { required: true, message: '天数不能为空', trigger: 'blur' },
              { type: 'number', message: '天数必须为数字值', trigger: 'blur' }
            ]">
            <el-input type="age" v-model.number="processDetial.num" autocomplete="off"></el-input>
          </el-form-item>
          <!-- <el-form-item label="经理" label-width="100px">
            <el-input v-model="processDetial.manager"></el-input>
          </el-form-item>
          <el-form-item label="主任" label-width="100px">
            <el-input v-model="processDetial.director"></el-input>
          </el-form-item> -->
        </el-col>
      </el-form>
      <div slot="footer" class="dialog_foote">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="okHandler">确 定</el-button>
      </div>
    </el-dialog>
  </search-table>
</template>

<script>
import SearchTable from '../../components/SearchTable.vue'
export default {
  name: 'StaffAffairList',
  data () {
    return {
      affairs: [],
      flows: [],
      columnsOptions: [
        {
          title: '名称',
          key: 'name',
          width: 0
        },
        {
          title: '说明',
          key: 'remarks',
          width: 0
        },
        {
          title: '操作',
          key: '',
          type: 'button',
          width: 300,
          buttons: [
            {
              text: '申请',
              click: this.apply
            },
            {
              text: '申请历史',
              click: this.history
            }
          ]
        }
      ],
      processDetial: {},
      visible: false,
      isAdd: false,
      affairDetail: {},
      searchKeys: ['name']
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList: function () {
      this.$requestx
        .get('/api/affair/gets')
        .then(res => {
          this.affairs = res
        })
        .catch(err => {
          this.$message.error(err)
        })
      this.$requestx
        .get('/api/flowchart/gets')
        .then(res => {
          this.flows = res
        })
        .catch(err => {
          this.$message.error(err)
        })
    },
    apply: function (row) {
      this.affairDetail = row
      this.visible = true
    },
    history: function (row) {
      this.$router.push({ path: `/staff/affair/history?id=${row.id}` })
    },
    okAdd () {
      this.processDetial.affairId = this.affairDetail.id
      this.processDetial.flowChartId = this.affairDetail.flowChartId
      return this.$requestx.post('/api/affairobject/add', this.processDetial)
    },
    okHandler: function () {
      this.$refs.form.validate(result => {
        if (result) {
          this.okAdd()
            .then(res => {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.getList()
              this.visible = false
              this.$refs.form.resetFields()
            })
            .catch(err => {
              this.$message.error(err)
              this.visible = false
            })
        }
      })
    },
    cancel: function () {
      this.visible = false
      this.checkDialog = false
      this.$refs.form.resetFields()
    }
  },
  components: {
    'search-table': SearchTable
  }
}
</script>
<style scoped>
.createButton {
  float: left;
}
</style>
